<html>
    <head></head>
    <link href="aui.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
    *{
        font-size:11px;
    }
    .aui-col-xs-4{
        padding:5px;
    }
    .table{
        padding:6px;
        text-align:center;
        background:#B8E1DF;
        border:1px #ffffff solid;
    }
    .allcount{
        color:red;
    }
    </style>
    <body>
    <div class="aui-col-xs-12">
        <div class="aui-col-xs-4">
            会员积分:<span id="hyjf"></span>
        </div>
        <div class="aui-col-xs-4">
            手机:<span id="sj"></span>
        </div>
        <div class="aui-col-xs-4">
            姓名:<span id="xm"></span>
        </div>
    </div>
    <div class="aui-col-xs-12">
        <div class="aui-col-xs-2 table">
            序号
        </div>
        <div class="aui-col-xs-3 table">
             外卡号
        </div>
        <div class="aui-col-xs-3 table">
            内卡号
        </div>
        <div class="aui-col-xs-2 table">
                奖额
        </div>
        <div class="aui-col-xs-2 table">
                积分
        </div>
        <div id="ttt">

        </div>
        <div class="aui-col-xs-12">
            <div class="aui-col-xs-4 allcount">
                总张数:<span id="zzs"></span>
            </div>
            <div class="aui-col-xs-4 allcount">
                总额:<span id="ze"></span>
            </div>
            <div class="aui-col-xs-4 allcount">
                总分:<span id="zf"></span>
            </div>
        </div>
    </div>
    </body>
    <script src="api.js"></script>
    <script type="text/javascript">
        function showData(json){
            var data = JSON.parse(json);
            $api.html($api.byId('hyjf'),data.pay_points);
            $api.html($api.byId('sj'),data.mobile_phone);
            $api.html($api.byId('xm'),data.nick_name);
            $api.html($api.byId('zzs'),data.result.length);
            $api.html($api.byId('ze'),data.allfee);
            $api.html($api.byId('zf'),data.allpoint);
            var html='';
            for(var i = 0 ; i < data.result.length;i++){
                 html+='<div class="aui-col-xs-2 table">';
                     html+=''+(parseInt(i)+1);
                 html+='</div>';
                 html+='<div class="aui-col-xs-3 table">';
                   html+=data.result[i].out;
                 html+='</div>';
                 html+='<div class="aui-col-xs-3 table">';
                     html+=data.result[i].inner;
                 html+='</div>';
                 html+='<div class="aui-col-xs-2 table">';
                        html+=data.result[i].fee;
                html+=' </div>';
                 html+='<div class="aui-col-xs-2 table">';
                 html+=data.result[i].point;
                 html+='</div>';
            }
            $api.html($api.byId('ttt'),html);
        }
    </script>
</html>